<template>
  <!--后台用户管理页面-->
  <!--  <h1>用户管理</h1>-->
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户统计" name="second">
      <el-row>
        <el-col style="width: 50%;">
          用户总数:1000(包含已注销用户)
          <div ref="myChart" style="width: 600px;height: 400px;"></div>
        </el-col>
        <el-col style="width: 50%;">
          <div ref="myChart1" style="width: 600px;height: 400px;"></div>
        </el-col>
      </el-row>

      <BR/>
      <el-row>

        <el-col>
          <el-form ref="form" :model="searchForm" label-width="120px">
            <el-form-item label="关键字段:">
              <el-input v-model="searchForm.boxBody" style="max-width: 260px"></el-input>
            </el-form-item>

            <el-form-item label="搜索规则:">
              <el-radio-group v-model="searchForm.rule">
                <el-radio label="昵称"></el-radio>
                <el-radio label="邮箱"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="searchUser(searchForm)">获得结果</el-button>
            </el-form-item>
          </el-form>

          <el-col>
            当前选中的用户类型(默认为普通用户)为:<font color="#6495ed">{{ csut.currentlySelectedUserType }}</font>
            当前选中的用户类型中的分类:<font color="#6495ed"> {{ csut.currentlySelectedUserTypeClassification }}</font>
          </el-col>
          <el-table
              :data="searchUserList"
              style="width: 100%"
              current-row-key="key"
              max-height="250">
            <el-table-column fixed prop="email" label="账号" width="200"></el-table-column>
            <el-table-column prop="nickName" label="昵称" width="100"></el-table-column>
            <el-table-column prop="userType" label="身份"></el-table-column>
            <el-table-column prop="registerTime" label="注册时间"></el-table-column>
            <el-table-column prop="lastLoginTime" label="最后登录时间"></el-table-column>
            <el-table-column prop="tokenCount" label="累计代币"></el-table-column>
            <el-table-column prop="tokensBalance" label="代币余额"></el-table-column>
            <el-table-column prop="integral" label="消费积分"></el-table-column>
            <el-table-column prop="deleteState" label="0未删除/1已删除"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button type="text" size="small" v-if="scope.row.deleteState==0"
                           v-on:click="deleteUser(scope.row.email)">删除
                </el-button>
                <el-button type="text" size="small" v-if="scope.row.deleteState==1"
                           v-on:click="recoveryUser(scope.row.email)">恢复
                </el-button>
                <el-button type="text" size="small">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

        <el-col>
          <!--          <div class="block">
                      <span class="demonstration">直接前往</span>
                                  <el-pagination
                                      @size-change="handleSizeChange"
                                      @current-change="handleCurrentChange"
                                      :current-page.sync="currentPage3"
                                      :page-size="100"
                                      layout="prev, pager, next, jumper"
                                      :total="1000">
                                  </el-pagination>
                    </div>-->
        </el-col>
      </el-row>

    </el-tab-pane>
    <el-tab-pane label="添加用户" name="third">添加用户

      <el-form ref="form" :model="userForm" label-width="120px">
        <el-form-item label="用户昵称">
          <el-input v-model="userForm.username" style="max-width: 260px"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userForm.password" style="max-width: 260px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input v-model="userForm.email" style="max-width: 260px"></el-input>
        </el-form-item>

        <el-form-item label="用户类型">
          <el-radio-group v-model="userForm.userType">
            <el-radio label="普通用户"></el-radio>
            <el-radio label="作者用户"></el-radio>
            <el-radio label="编辑用户"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit(userForm)">立即提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-tab-pane>
    <el-tab-pane label="修改用户信息" name="fourth">修改用户信息

    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {addUserForAdmin, deleteUser, getInitializationData, getUserForType, recoveryUser, searchUser} from "@/api";
import * as echarts from 'echarts';

let that;//用于保存this
export default {
  name: "NovelAdminUser",
  data() {
    return {
      activeName: 'second',
      csut: {
        currentlySelectedUserType: '',// 当前选中的用户类型为
        currentlySelectedUserTypeClassification: '',// 当前选中的用户类型中的分类
      },

      userForm: {
        username: '',//昵称
        password: '',//密码
        email: '',//验证邮箱
        userType: '',//用户类型
      },

      searchForm: {
        boxBody: '',
        rule: '',
      },
      searchUserList: [{}],

      InitializationUserData: [{
        LoggedOff:0,//已注销数量
        OrdinaryUsers:0,//普通用户数量
        Administrators:0,//管理员数量
        Edit:0,//编辑数量
        Author:0,//作者数量
        ForbiddenUsers:0,//已禁言数量
        NewUser:0,//新用户数量
        Oldusers:0,//老用户数量
      }],
    };
  },
  mounted() {
    this.getInitializationData();
    this.pieChartTypeRun();
    this.SelectUserTypeData();
  },
  methods: {
    getInitializationData(){
      getInitializationData().then(res => {
        that.InitializationUserData = res.data.data;
        that = this;
        that.pieChartTypeRun();
        that.SelectUserTypeData();
        console.log(that.InitializationUserData);
      }).catch(err =>alert(err));
    },

    onSubmit(userForm) {
      addUserForAdmin(userForm).then(res => {
        alert(res.data);
      }).catch(err => alert(err))
    },
    searchUser(searchForm) {
      this.currentlySelectedUserType = '';
      this.currentlySelectedUserTypeClassification = '';
      searchUser(searchForm).then(res => {
        this.searchUserList = res.data;
      }).catch(err => alert(err))
    },
    //{"data":{"message":'',"code":0,"data":""},"p"}
    deleteUser(email) {
      deleteUser(email).then(res => {
        alert(res.data);
      }).catch(err => alert(err))
    },
    recoveryUser(email) {
      recoveryUser(email).then(res => {
        alert(res.data);
      }).catch(err => alert(err))
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    pieChartTypeRun() {
      let myChart = echarts.init(this.$refs.myChart);
      let option;
      option = {
        title: {
          text: '用户类型统计',
          // subtext: '数据库数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '数据库数据',
            type: 'pie',
            radius: '50%',
            data: [
              {value: that.InitializationUserData.OrdinaryUsers, name: '普通用户'},
              {value: that.InitializationUserData.Administrators, name: '管理员'},
              {value: that.InitializationUserData.Author, name: '作者'},
              {value: that.InitializationUserData.Edit, name: '编辑'},
              {value: that.InitializationUserData.LoggedOff, name: '已注销'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      option && myChart.setOption(option);
      myChart.on('click', function (params) {
        that.csut.currentlySelectedUserTypeClassification = '';
        that.csut.currentlySelectedUserType = params.name;//此处this将会失效
        that.getUserForType(that.csut);
      });
    },

    getUserForType(type) {//获取指定类型的用户数据(普通用户、管理员用户。。。。)
      // alert(type.currentlySelectedUserType+"\n"+type.currentlySelectedUserTypeClassification);
      getUserForType(type).then(res => {
        that.searchUserList = res.data.data;
        // alert(res.data.message);
      }).catch(err => alert(err))
    },

    SelectUserTypeData() {
      let myChart1 = echarts.init(this.$refs.myChart1);
      let option1;
      option1 = {
        dataset: {
          source: [
            ['score', 'amount', 'product'],
            [70, that.InitializationUserData.ForbiddenUsers, '已禁言用户'],
            [30, that.InitializationUserData.Oldusers, '老用户'],
            [10, that.InitializationUserData.NewUser, '新用户'],
          ]
        },
        grid: {containLabel: true},
        xAxis: {name: '用户数量'},
        yAxis: {type: 'category'},
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: 0,
          max: 100,
          text: ['High Score', 'Low Score'],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#65B581', '#FFCE34', '#FD665F']
          }
        },
        series: [
          {
            type: 'bar',
            encode: {
              // Map the "amount" column to X axis.
              x: 'amount',
              // Map the "product" column to Y axis
              y: 'product'
            }
          }
        ]
      };
      option1 && myChart1.setOption(option1);
      myChart1.on('click', function (params) {
        that.csut.currentlySelectedUserTypeClassification = params.name;//此处this将会失效
        that.getUserForType(that.csut);
      });
    },

  },
  created() {
    that = this;//将this保存到that中
  }
}
</script>

<style scoped>

</style>